<template>
  <div class="main">
    <div class="title">
      Browse By RNA Types
    </div>
    <div class="rna-warp">
      <div class="item" v-for="(item, idx) in rnaList" :key="idx" @click="rnaTypeClick(item)">
        <img width="130px" :src="require(`@/assets/image/browse/${item.name}.jpg`)"/>
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "rnaType",
    components: {},
    data() {
      return {
        rnaList: [{name: "mRNA"},{name: "lncRNA"},{name: "circRNA"},{name: "sRNA"}],
      }
    },
    mounted() {
    },
    methods: {
      rnaTypeClick(item) {
        this.$router.push({path: '/overview', query: {rnaType: item.name}})
      },
    }
  }
</script>

<style lang="stylus" scoped>

  .main {
    width 1170px
    margin-top 20px
    padding-top 30px
    font-family: Times New Roman;

    .title {
      font-size 28px
      text-align left
      margin-bottom 20px
      padding 15px 0
      color #11427D
      font-weight 800
    }

    .rna-warp {
      padding 15px
      display flex

      justify-content: space-evenly;
      .item {
        display flex
        cursor pointer
        flex-direction column
        align-items center
        justify-content center
        div {
          font-weight 600
          color #11427DFF
          font-size 20px
          margin-top 10px
          //margin-bottom 10px
          //margin-left 30px
          font-family Times New Roman
        }
        div:hover {
          color: #aa604f;
          text-decoration underline
        }
      }
    }
  }

</style>
